﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Cells with CheckBox</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.checkbox.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.checkbox.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){
				$scope.gridName = "gridSample";
				$scope.sampleRows = [];
				$scope.defaultIcon = "icons-medium empty-doc";

				$scope.sampleColumns = [
					{ id: 9, editorType: 'checkbox', editorSettings: { threeState: true }, cellAlignment: 'center', size: 30, fixedWidth: true },
					{ id: 1, columnTitle: "Customer/Order ID", columnAlignment: "center", size: 250 },
					{ id: 2, columnTitle: "Ordered", columnAlignment: "center", cellAlignment: "center", size: 120 },
					{ id: 3, columnTitle: "Shipped", columnAlignment: "center", cellAlignment: "center", size: 120 },
					{ id: 4, columnTitle: "Ship Via", columnAlignment: "center", size: 130 },
					{ id: 5, columnTitle: "Freight", columnAlignment: "center", cellAlignment: "right", size: 100 },
					{ id: 8, columnTitle: "Country", columnAlignment: "center", cellAlignment: 'center' }

				];

				$scope.flatData = [
					{ 
						rowID: 1,
						icon: "icons-medium people",
						rowText: "Piccolo und mehr",
						cells: [{ cid: 9, value: 'checked' }, { cid: 1, cellText: "Piccolo und mehr" }, { cid: 6, cellText: "Geislweg 14" }, { cid: 7, cellText: "Salzburg" }, { cid: 8, cellText: "Austria" }]
					},
					{ 
						rowID: 11,
						parentID: 1,
						rowText: "Order #10259",
						cells: [{ cid: 1, cellText: "10259" }, { cid: 2, cellText: "9/13/2012" }, { cid: 3, cellText: "9/27/2012" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "360.63" }]
					},
					{ 
						rowID: 12,
						parentID: 1,
						rowText: "Order #11094",
						cells: [{ cid: 1, cellText: "11094" }, { cid: 2, cellText: "1/20/2013" }, { cid: 3, cellText: "2/5/2013" }, { cid: 4, cellText: "Federal Shipping" }, { cid: 5, cellText: "200.14" }]
					},
					{ 
						rowID: 2,
						icon: "icons-medium people",
						rowText: "Frankenversand",
						cells: [{ cid: 9, value: 'indeterminate' }, { cid: 1, cellText: "Frankenversand" }, { cid: 6, cellText: "Berliner Platz 43" }, { cid: 7, cellText: "München" }, { cid: 8, cellText: "Germany" }]
					},
					{ 
						rowID: 21,
						parentID: 2,
						rowText: "Order #11536",
						cells: [{ cid: 1, cellText: "11536" }, { cid: 2, cellText: "12/9/2013" }, { cid: 3, cellText: "1/7/2014" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "85.53" } ]
					},
					{ 
						rowID: 22,
						parentID: 2,
						rowText: "Order #14472",
						cells: [{ cid: 1, cellText: "14472" }, { cid: 2, cellText: "11/14/2014" }, { cid: 3, cellText: "11/25/2014" }, { cid: 4, cellText: "Speedy Express" }, { cid: 5, cellText: "112.30" } ]
					},
					{ 
						rowID: 3,
						icon: "icons-medium people",
						rowText: "Laughing Bacchus Wine Cellars",
						cells: [{ cid: 9 }, { cid: 1, cellText: "Laughing Bacchus Wine Cellars" }, { cid: 6, cellText: "1900 Oak St." }, { cid: 7, cellText: "Vancouver" }, { cid: 8, cellText: "Canada" }]
					},
					{ 
						rowID: 31,
						parentID: 3,
						rowText: "Order #11495",
						cells: [{ cid: 1, cellText: "11495" }, { cid: 2, cellText: "8/7/2013" }, { cid: 3, cellText: "9/20/2013" }, { cid: 4, cellText: "United Package" }, { cid: 5, cellText: "49.28" } ]
					}
				];

				$scope.dataFields = {
					column: {
						headerText: 'columnTitle',
						headerAlignment: 'columnAlignment',
						contentAlignment: 'cellAlignment',
						width: 'size'
					},
					row: {
						id: 'rowID',
						pid: 'parentID',
						text: 'rowText'
					},
					cell: {
						text: 'cellText'
					}
				}

				var loadTimer = $timeout(function(){
					$gridService.expandColIndex($scope.gridName, 1);
					$gridService.loadData($scope.gridName, $scope.flatData, null, $scope.dataFields, true);


					$timeout.cancel(loadTimer);
				}, 1);

				$scope.onCellValueChanging = function(e){
					if (e.row.rowID == 2)
						return false;
				}
			}]);
    </script>
    <style type="text/css">
		/* TreeGrid settings */
		.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell
		{
			padding: 1px 3px;
		}
		.iui-treegrid-row-cell-content
		{
			padding: 1px 3px;
		}

		/* Sample settings */
		.control-panel
		{
			width: 170px;
		}
		.feature-content
		{
			width: 900px;
		}
		.feature-list
		{
			width: 300px;
		}
        .directive
        {
        	border: thin solid #cecece;
        	width: 900px;
        	height: 300px;
        }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span class="product-name">IntegralUI</span> Studio <span class="product-platform">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Cells with CheckBox</h2>
	        <div class="feature-content">
                <iui-treegrid name="{{gridName}}" class="directive" columns="sampleColumns" rows="sampleRows" row-icon="defaultIcon" show-footer="false"  cellvalue-changing="onCellValueChanging(e)"></iui-treegrid>
                <br style="clear:both;"/>
                <div class="feature-help">
                    <p><span class="initial-space"></span>This example shows how to add check box to cells in TreeGrid, AngularJS. This is done by setting the <span class="code-field">editorType</span> field of specified column to <span class="code-value">'checkbox'</span>, which allows CheckBox component to appear inside a cell. By default, check box is set to accept two values: true or false. However, you can change this in <span class="code-field">editorSettings</span> to allow check box to have tri-state values: <span class="code-value">'unchecked'</span>, <span class="code-value">'indeterminate'</span> and <span class="code-value">'checked'</span>.</p>
                    <p><span class="initial-space"></span>Each cell has a <span class="code-field">value</span> field which can accept custom objects, in case of an check box, it accepts one of these values:</p>
                    <p><span class="initial-space"></span>When two-state mode is set:</p>
                    <ul>
                    	<li><span class="code-lang">false</span> - a check box inside the cell is unchecked</li>
                    	<li><span class="code-lang">true</span> - a check box inside the cell is checked</li>
                    </ul>
                    <p><span class="initial-space"></span>When tri-state mode is set:</p>
                    <ul>
                    	<li><span class="code-string">'unchecked'</span> - a check box inside the cell is unchecked</li>
                    	<li><span class="code-string">'indeterminate'</span> - a check box inside the cell is undeterminated</li>
                    	<li><span class="code-string">'checked'</span> - a check box inside the cell is checked</li>
                    </ul>
                    <p>Whenever a cell value is changed the CheckBox state is updated, and vice versa, when CheckBox state is changed, the value of cell object is also updated. These changes are accompanied with two events: <span class="code-field">cellvalueChanging</span> and <span class="code-field">cellvalueChanged</span>. By handling the cellvalueChanging, you can prevent check box value changes, by specifying custom conditions in your code. In case of this example, the second check box will remain its state.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
